<template>
  <!-- 目的: 封装一个复用的组件, 可以动态的插入标签, 来作为注册页的一块项 -->
  <div>
    <Son>
      <template #top>
        <p>用户名</p>
      </template>
      <template #bottom>
        <input type="text" />
      </template>
    </Son>
    <Son>
      <template #top>
        <p>密码</p>
      </template>
      <template #bottom>
        <input type="password" />
      </template>
    </Son>
    <Son>
      <template #top>
        <p>性别</p>
      </template>
      <template #bottom>
        <input type="radio" name="sex" value="男" />男
        <input type="radio" name="sex" value="女" />女
      </template>
    </Son>
    <Son>
      <template #top>
        <p>爱好</p>
      </template>
      <template #bottom>
        <input type="checkbox" />抽烟 <input type="checkbox" />喝酒
        <input type="checkbox" />烫头
      </template>
    </Son>
    <Son>
      <template #top>
        <p>来自于</p>
      </template>
      <template #bottom>
        <select>
          <option value="北京">北京</option>
          <option value="天津">天津</option>
          <option value="南京">南京</option>
        </select>
      </template>
    </Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  components: {
    Son,
  },
}
</script>

<style></style>
